<template>
  <div class="create-number-module">
    <el-form ref="formDataRef" :model="dataForm" :rules="formRules" label-position="left" class="el-form-box-left" label-width="85px">
      <div class="form">
        <div class="one-cell">
          <el-form-item label="模块名称" prop="name" class="name" style="margin-right: 40px;">
            <el-input
              v-model.trim="dataForm.name"
              maxlength="20"
              placeholder="请填写模块名称"
              name="name"
              type="text"/>
          </el-form-item>
          <el-form-item label-width="110px" label="页面布局展示" prop="layoutNum" style="margin-right: 40px;">
            <el-select v-model="dataForm.layoutNum" popper-class="global-select-down" name="layoutNum">
              <el-option
                v-for="item in layoutOptions"
                :key="item.id"
                :label="item.name"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <SelectLabel ref="SelectLabel" :is-hide="true" />
        <el-form-item label="定时更新" prop="isUpdateRegularly" class="isUpdateRegularly">
          <div style="height: 30px;">
            <el-switch
              v-model="dataForm.isUpdateRegularly"
              class="fb-switch"
            />
            <el-select
              v-if="dataForm.isUpdateRegularly"
              v-model="dataForm.updateRegularlyType"
              placeholder="请选择"
              class="select-updateRegularlyType"
              popper-class="global-select-down"
              name="sortType">
              <el-option
                v-for="item in updateRegularlyOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id" />
            </el-select>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <StyleSetting ref="stySetting" module="number" />
    <fixed-pagination>
      <div class="center">
        <el-button type="primary" size="small" @click="toSubmit">保存</el-button>
        <el-button class="cancel-btn-style" type="info" size="small" @click="handleClose">取消</el-button>
      </div>
    </fixed-pagination>
  </div>
</template>
<script>
import { createChartTable, editChartTable } from '@/api/reportManage';
import SelectLabel from './selectLabel';
import StyleSetting from './commonStySetting/styleDiy';
import { parseJson } from '@/utils';
import { layoutOptions } from '@/filters/status';
import { updateRegularlyOptions } from './module/selectData.js';

export default {
  components: { SelectLabel, StyleSetting },
  props: {
    permissionCode: {
      type: String,
      default: ''
    },
    tabId: {
      type: String | Number,
      default: ''
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    editType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      updateRegularlyOptions,
      dataForm: {
        kind: 4,
        name: '',
        layout: '',
        layoutNum: 36,
        isUpdateRegularly: false,
        styleConfig: '',
        updateRegularlyType: '1小时'
      },
      formRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写模块名称' }],
        layoutNum: [{ required: true, trigger: 'change', message: '请选择页面布局展示' }]
      },
      layoutOptions,
      defaultLayout: { x: 0, y: 0, h: 0 }
    };
  },
  methods: {
    setDefault(data) {
      const dataForm = this.dataForm;
      const layout = parseJson(data.layout);
      Object.assign(dataForm, data);
      dataForm.layoutNum = Number(layout.w || 12);
      this.defaultLayout = layout;
      this.$refs.SelectLabel.setDefault(data.tags);
      if (this.$refs.stySetting && dataForm.id) {
        this.$refs.stySetting.setDefault(dataForm.styleConfig);
      }
    },
    toSubmit() {
      const dataForm = this.dataForm;
      if (this.$refs.stySetting) {
        dataForm.styleConfig = this.$refs.stySetting.getStyle();
      }
      const tags = this.$refs.SelectLabel.getLabelData();
      const childenFormDataRef = this.$refs['SelectLabel'].$refs['formDataRef'];
      dataForm.tags = tags;
      this.$refs['formDataRef'].validate((valid) => {
        if (valid) {
          childenFormDataRef.validate((valid) => {
            if (valid) {
              // 判断标签有无选取字段
              let tagsFieldIdEmpty = true;
              tags.forEach(i => {
                if (i.fieldId && i.fieldId !== '') {
                  tagsFieldIdEmpty = false;
                }
              });
              if (tagsFieldIdEmpty) {
                this.$message.error('请选择标签字段');
                return;
              }
              // const layout = { x: 0, y: 0, w: w, h: 0 };
              const layout = this.defaultLayout;
              layout.w = dataForm.layoutNum;
              this.defaultLayout = layout;
              dataForm.layout = JSON.stringify(layout);
              dataForm.permissionCode = this.permissionCode;
              dataForm.tabId = this.tabId;
              dataForm.isMobile = this.$route.query.editMobileMode ? 1 : 0;
              dataForm.tags.forEach(i => {
                if (i.dataItemFiltering && i.dataItemFiltering.length) {
                  i.dataItemFiltering.forEach(j => {
                    if (j.field.indexOf('日期') >= 0 || j.field.indexOf('时间') >= 0) {
                      j.operation = '=';
                    }
                  });
                }
                if (i.dataFiltering && i.dataFiltering.length) {
                  i.dataFiltering.forEach(j => {
                    if (j.field.indexOf('日期') >= 0 || j.field.indexOf('时间') >= 0) {
                      j.operation = '=';
                    }
                  });
                }
              });
              if (!this.isEdit || this.editType === 'copy') {
                this.add(dataForm);
              } else {
                this.edit(dataForm);
              }
            } else {
              return false;
            }
          });
        } else {
          return false;
        }
      });
    },
    add(dataForm) {
      createChartTable(dataForm).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功');
          this.handleClose();
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        console.log(err);
        // this.$message.error(err.message);
      });
    },
    edit(dataForm) {
      dataForm.id = this.$route.params.id || '';
      editChartTable(dataForm).then(res => {
        if (res.code === 200) {
          this.$message.success('编辑成功');
          this.handleClose();
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        console.log(err);
        // this.$message.error(err.message);
      });
    },
    handleClose() {
      this.$emit('goBack');
    }
  }
};
</script>
<style lang="scss" scoped>
.create-number-module {
  margin-top: 26px;
  .one-cell {
    display: flex;
  }
}
.select-updateRegularlyType {
  width: 120px;
  margin-left: 10px;
  &::v-deep {
    .el-input__inner {
      width: 120px !important;
    }
  }
}
</style>
<style lang="scss">
.create-number-module {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        font-size: 13px !important;
      }
      .el-input__icon {
        line-height: 24px;
      }
      .el-input__inner {
        height: 30px;
        width: 240px;
      }
    }
    .contact-list {
      margin-bottom: 16px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .add-btn {
      button {
        width: 501px;
        background-color: #f4f4f4;
        border: 1px dashed #e0e0e0;
        color: #777;
        .add-img {
          margin-right: 8px;
        }
      }
    }
  }
  .select-report {
    .el-select {
      width: 240px;
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .flex {
    .el-form-item__content {
      display: flex;
      align-items: center;
    }
  }
  .select-sort {
    display: inline-block;
    display: flex;
    .el-input {
      width: 120px !important;
      margin-left: 19px;
    }
    .el-input__inner {
      width: 120px !important;
    }
  }
  .select-field-dropdown {
    .el-select-dropdown__item{
      display: flex;
      align-items: center;
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(102,102,102,1);
      padding: 0 12px;
    }
    &.multiple {
      .el-select-dropdown__item {
        &::before {
          content: '';
          display: inline-block;
          position: relative;
          border: 1px solid #DCDFE6;
          border-radius: 2px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 14px;
          height: 14px;
          background-color: #FFFFFF;
          z-index: 1;
          margin-right: 8px;
        }
        &.selected {
          position: relative;
          &::before {
            background-color: #406EFF;
            border-color: #406EFF;
          }
          &::after {
            left: 13px;
            width: 14px;
            top: 1px;
            color: #fff;
            z-index: 10;
          }
        }
      }
    }
    &.radio {
      .el-select-dropdown__item {
        &::before {
          content: '';
          display: inline-block;
          position: relative;
          width:16px;
          height:16px;
          border-radius:100%;
          margin-right: 8px;
          border:1px solid rgba(221,221,221,1);
        }
        &.selected {
          &::before {
            border:1px solid rgba(64,110,255,1);
          }
          &::after {
            position: absolute;
            content: '';
            left: 16px;
            top: 50%;
            margin-top: -4px;
            z-index: 10;
            width:8px;
            border-radius:100%;
            height:8px;
            background:rgba(64,110,255,1);
          }
        }
      }
    }
  }
  .el-tag.el-tag--info {
    color: #406EFF;
    background-color: #ecf1ff;
  }
}

</style>
